<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简易qq音乐播放界面</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/jquery.mCustomScrollbar.css" />
    <link rel="stylesheet" href="./css/index.css">
    <script src="./js/jquery-1.12.2.min.js"></script>
    <script src="./js/jquery.mCustomScrollbar.concat.min.js"></script>
    <script src="./js/player.js"></script>
    <script src="./js/progress.js"></script>
    <script src="./js/lycis.js"></script>
    <script src="./js/index.js"></script>
</head>

<body>
    <header class="header clearfix">
        <h1 class="title">
            <a href="">
                QQ音乐
            </a>
        </h1>
        <div class="reg">
            <a href="">登录</a>
            <a href="">设置</a>
        </div>
    </header>
    <div class="main">
        <div class="wrapper clearfix">
            <div class="main-left">
                <div class="left-title">
                    <a href="javascript:;">
                        <i class="iconfont icon-xin"></i> 收藏
                    </a>
                    <a href="javascript:;">
                        <i class="iconfont icon-jia1"></i> 添加到
                    </a>
                    <a href="javascript:;">
                        <i class="iconfont icon-xiazai"></i> 下载
                    </a>
                    <a href="javascript:;">
                        <i class="iconfont icon-qingkong"></i> 删除
                    </a>
                    <a href="javascript:;">
                        <i class="iconfont icon-clear"></i> 清空列表
                    </a>
                </div>
                <div class="songlist" data-mcs-theme="minimal-dark">
                    <ul>
                        <li class="first">
                            <a href="javascript:;" class="songselect">
                                <i class="iconfont icon-gou"></i>
                            </a>
                            <div class="songname">
                                歌曲
                            </div>
                            <div class="singer">
                                歌手
                            </div>
                            <a href="javascript:;" class="songtime">
                                时长
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="main-right">
                <a class="right-pic show" href="">
                    <img src="./img/TP.jpg" alt="">
                </a>
                <ul class="rightsong">
                    <li>
                        <span>歌曲名:</span>
                        <a class="musicName" href="">下山</a>
                    </li>
                    <li>
                        <span>歌手名:</span>
                        <a class="musicSinger" href="">苏有朋 <span>/</span> 陈志朋</a>
                    </li>
                    <li>
                        <span>专辑名：</span>
                        <a class="muiscAublmn" href="">天赐的声音 第2期</a>
                    </li>
                </ul>
                <div class="lyric">
                    <ul class="lyrictxt">
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <footer class="footer">
        <div class="wrapper">
            <a class="prev footicon" href="javascript:;" title="alt+←"></a>
            <a class="player footicon" href="javascript:;" title="[空格]"></a>
            <a class="next footicon" href="javascript:;" title="alt+→"></a>
            <div class="player-proess">
                <div class="playerTop">
                    <a class="songtxt" href="">下山</a>
                    <span>-</span>
                    <a class="playname" href="">买什么菜</a>
                    <div class="songlen">00:00 / 00:00</div>
                </div>
                <div class="line">
                    <div class="bar">
                        <div class="cur"></div>
                    </div>
                </div>
            </div>
            <a class="sound-list footicon" href="javascript:;" title="列表循环[O]"></a>
            <a class="sound-fav footicon" href="javascript:;" title="喜欢[V]"></a>
            <a class="sound-down footicon" href="javascript:;" title="下载[D]"></a>
            <a class="sound-comment footicon" href="javascript:;"></a>
            <a class="sound-only footicon" href="javascript:;" title="打开纯净模式[C]"></a>
            <div class="soundvolume ">
                <a class="footicon volume" href="javascript:;"></a>
                <div class="soundline">
                    <div class="soundbar">
                        <div class="soundcur"></div>
                    </div>
                </div>
            </div>
    </footer>
    <div class="bg"></div>
    <div class="mask"></div>
    <audio src=""></audio>
</body>

</html>